<template>
  <div>
    <div class="search-box">
      <div class="title">
        筛选条件
      </div>
      <div class="search">
        <Form ref="formInline" :model="formInline" inline :label-width="100">
          <FormItem label="项目名称：">
            <Input
              type="text"
              v-model="formInline.itemName"
              placeholder="请输入项目名称"
            >
            </Input>
          </FormItem>
          <FormItem label="日期">
            <DatePicker
              v-model="formInline.time"
              type="daterange"
              placeholder="请选择日期"
            ></DatePicker>
          </FormItem>
          <FormItem label="状态">
            <Select v-model="formInline.user" style="width:200px">
              <option value="0">已创建</option>
              <option value="1">已超时</option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="getTableData" style="margin:0 5px;"
              >查找</Button
            >
            <Button type="primary" @click="addItem">新增</Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <br />
    <Table border :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="isUse">
        <span>{{ row.isUse ? '已超时' : '已创建' }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="btn-span" @click="getDetails(row)">编辑</span>
        <span class="btn-span" @click="getDetails(row)">复制</span>
      </template>
    </Table>
    <br />
    <div>
      <Page
        :total="total"
        :current="formInline.pageNum"
        :page-size="formInline.pageSize"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        :page-size-opts="[10, 20, 30, 40]"
        show-elevator
        show-sizer
      />
    </div>
  </div>
</template>
<script>
import instance from '@/http/http'
export default {
  data() {
    return {
      formInline: {
        companyId: this.$store.state.companyId,
        endTime: '',
        isUse: '',
        itemName: '',
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        time: []
      },
      total: 0,
      columns1: [
        {
          title: '项目名称',
          align: 'center',
          key: 'itemName'
        },
        {
          title: '截止日期',
          align: 'center',
          key: 'endTime'
        },
        {
          title: '创建日期',
          align: 'center',
          key: 'startTime'
        },
        {
          title: '状态',
          align: 'center',
          slot: 'isUse',
          key: 'isUse'
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action'
        }
      ],
      data1: []
    }
  },
  mounted() {
    this.$store.dispatch('changeTabName', '1')
    this.getTableData()
  },
  methods: {
    addItem() {
      this.$router.push({
        path: '/manage/addItem'
      })
    },
    getDetails(item) {
      this.$router.push({
        path: '/manage/details/' + item.id
      })
    },
    pageChange(val) {
      this.formInline.pageNum = val
      this.getTableData()
    },
    pageSizeChange(size) {
      this.formInline.pageSize = size
      this.getTableData()
    },
    getTableData() {
      let data = this.formInline
      if (data.time.length) {
        data.startTime = data.time[0]
        data.endTime = data.time[1]
      }
      instance.post('/item/queryPage', data).then(res => {
        if (res.code == 200) {
          this.data1 = res.data.list
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.search-box {
  border: 1px solid #5cadff;

  .title {
    padding: 0 20px;
    line-height: 40px;
    background: #eee;
  }
  .search {
    padding: 20px 20px 0 20px;
  }
}
.btn-span {
  color: #5cadff;
  padding: 0 5px;
  cursor: pointer;
}
</style>
